<template>
  <div class="order-item box">
    <!-- 顶部信息 -->
    <div class="fz-14 bd-bottom pb-10 mb-10">
      <div>
        <span>订单号：</span>
        <span>{{ v.order_sn }}</span>
      </div>
    </div>

    <!-- 商品列表 -->
    <ul class="product-list mb-5">
      <li
        class="flex flex-cc bd-bottom"
        v-for="(p, pIndex) in v.order_goods"
        :key="pIndex"
      >
        <!-- 封面 -->
        <div class="flex-fs-0 mr-10">
          <van-image class="cover radius radius--lg" :src="p.image"></van-image>
        </div>

        <!-- 数据 -->
        <div
          class="click"
          @click="router.push(`/product/detail?id=${p.goods_id}`)"
        >
          <div class="fz-12">
            <!-- 名称 -->
            <div class="fz-14 hide-2">{{ p.title }}</div>

            <div>
              <div>
                <span>原价：</span>
                <span>{{ p.marketprice }} U</span>
              </div>

              <div>
                <span>现价：</span>
                <span>{{ p.price }} U</span>
              </div>
            </div>

            <div>
              <div>
                <span>规格：</span>
                <span>未接入</span>
              </div>

              <div>
                <span>尺码：</span>
                <span>未接入</span>
              </div>
            </div>

            <div class="cl-success">
              <span>预计空投额：</span>
              <span>未接入 PC</span>
            </div>

            <div>
              <span>数量：</span>
              <span>{{ p.nums }}</span>
            </div>

            <div>
              <span>支付价格：</span>
              <span>{{ p.realprice }}</span>
            </div>
          </div>
        </div>
      </li>
    </ul>

    <!-- 操作栏 -->
    <div>
      <!-- 待支付 -->
      <div class="flex" v-if="v.paystate === 0">
        <van-button
          class="mr-10"
          type="primary"
          plain
          @click.top="router.push(`/order/pay?id=${v.order_sn}`)"
        >
          支付
        </van-button>
        <van-button type="primary" @click.top="showDelConfirm(v)">
          <div class="cl-error">删除</div>
        </van-button>
      </div>

      <!-- 待收货 -->
      <div class="flex" v-if="v.shippingstate === 1">
        <van-button
          class="mr-10"
          type="primary"
          plain
          @click.top="showTakeConfirm(v)"
        >
          确认收货
        </van-button>
        <van-button type="primary" @click.top="checkLogistics(v)">
          查看物流
        </van-button>
      </div>

      <!-- 已完成 -->
      <div
        class="flex"
        v-if="[3, 4].includes(v.orderstate) && v.shippingstate === 2"
      >
        <van-button type="primary" plain @click.top>售后</van-button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { showConfirmDialog } from 'vant'
import 'vant/es/dialog/style'
import api from 'js/api'

const props = defineProps(['v'])
const emit = defineEmits(['refresh'])
const router = useRouter()

// 删除订单
async function delOrder() {
  const params = {
    order_sn: v.order_sn,
  }

  const { code } = await api.delOrder(params)

  if (code === 1) {
    emit('refresh')
  }
}

// 确认收货
async function takeProduct(v) {
  const params = {
    order_sn: v.order_sn,
  }

  const { code } = await api.takeProduct(params)

  if (code === 1) {
    emit('refresh')
  }
}

// 查看物流
async function checkLogistics(v) {
  const params = {
    order_sn: v.order_sn,
  }

  const { code } = await api.checkLogistics(params)

  if (code === 1) {
  }
}

// 显示删除
function showDelConfirm(v) {
  showConfirmDialog({
    title: '消息提示',
    message: '确认需要删除该订单？',
  }).then(() => {
    delOrder(v)
  })
}

// 显示确认收货
function showTakeConfirm(v) {
  showConfirmDialog({
    title: '消息提示',
    message: '确认已收到商品？',
  }).then(() => {
    takeProduct(v)
  })
}
</script>

<style lang="scss" scoped>
.order-item {
  position: relative;

  .product-list {
    li {
      padding-bottom: 10px;
      margin-bottom: 10px;

      .cover {
        width: 100px;
        height: 100px;
      }
    }
  }

  :deep(.van-button) {
    min-width: 70px !important;
    height: 30px !important;
    padding: 0;
  }
}
</style>
